<template>
  <div class="pageStyle" style="width: 100%; height: 100%; margin-top: 10px">
    <el-card>
      <!-- <div class="toolbar">
      <div class="btn" @click="preMonth">上一月</div>
      <div class="date">{{ currentYear }}年{{ currentMonth }}月</div>
      <div class="btn" @click="nextMonth">下一月</div>
    </div> -->
      <div class="top">
        <div class="top-left">
          <img
            @click="preMonth"
            class="left-img"
            src="@/assets/images/keranqiti/箭头-active.png"
            alt=""
          />
          <img
            @click="nextMonth"
            class="right-img"
            src="@/assets/images/keranqiti/箭头-active.png"
            alt=""
          />
          <span class="txt">今日：{{ state.leftDate }}</span>
        </div>
        <div class="top-center">{{ state.nowDate }}</div>
        <div class="top-right">
          <span class="genxin">更新</span>
          <span class="yichang">异常</span>
          <span>
            <span
              v-for="(item, index) in state.rightDate"
              :key="index"
              @click="qiehuanFn(index)"
              :class="{ 'right-txt-active': index === state.rightDateIndex }"
              class="right-txt"
            >
              {{ item }}
            </span>
          </span>
        </div>
      </div>
      <div class="container">
        <div v-for="(item, index) in header" :key="index" class="grid-item">
          {{ item }}
        </div>
        <div
          v-if="state.rightDateIndex === 0"
          v-for="(item, index) in lastMonthSurplusDayArray"
          :key="index"
          class="grid-item2 prev"
        >
          {{ item }}
        </div>
        <!-- currentMonthDayCount 当前月份总天数 -->
        <div
          v-if="state.rightDateIndex === 0"
          v-for="(item, index) in state.currentMonthList"
          :key="index"
          class="grid-item2"
          :class="{
            'container-hover': item.updateNum !== 0 || item.faultNum !== 0,
          }"
          :style="{'border': state.monthActive == currentMonth && index + 1 == currentDate ? '3px solid #ffaa4f' : ''}"
        >
        <!-- :style="{
            'background-color':
              state.monthActive == currentMonth && index + 1 == currentDate
                ? 'rgba(239, 246, 255, .5)'
                : '',
          }" -->
          <span> {{ index + 1 }}</span>
          <el-popover
            placement="right"
            :width="375"
            trigger="hover"
            content="this is content, this is content, this is content"
          >
            <template #reference>
              <div>
                <!-- <span> {{ item }}</span> -->
                <div v-if="item.updateNum !== 0 || item.faultNum !== 0">
                  <div class="pop-genxin">
                    <span class="icon-genxin"></span>
                    <span>更新</span>
                    <span class="num">{{ item.updateNum }}</span>
                  </div>
                  <div class="pop-yichang">
                    <span class="icon-yichang"></span>
                    <span>异常</span>
                    <span class="num">{{ item.faultNum }}</span>
                  </div>
                </div>
              </div>
            </template>
            <div class="pop-content">
              <div class="content-item">
                <div class="title">分站</div>
                <div class="btm-blue">
                  新增({{ item.historySubstationInsertList.length }})
                </div>
                <div class="btm-blue">
                  编辑({{ item.historySubstationEditList.length }})
                </div>
                <div class="btm-blue">
                  删除({{ item.historySubstationDeletedList.length }})
                </div>
                <div class="btm-red">
                  故障({{ item.historySubstationErrorList.length }})
                </div>
                <div class="btm-red">
                  网络故障({{ item.historySubstationNetErrorList.length }})
                </div>
              </div>
              <div class="content-item">
                <div class="title">测点</div>
                <div class="btm-blue">
                  新增({{ item.historyPointInsertList.length }})
                </div>
                <div class="btm-blue">
                  编辑({{ item.historyPointEditList.length }})
                </div>
                <div class="btm-blue">
                  删除({{ item.historyPointDeletedList.length }})
                </div>
                <div class="btm-red">
                  报警({{ item.historyPointAlarmList.length }})
                </div>
                <div class="btm-red">
                  故障({{ item.historyPointFaultList.length }})
                </div>
                <div class="btm-red">
                  断电({{ item.historyPointPowerOffList.length }})
                </div>
              </div>
              <div class="content-item">
                <div class="title">电源</div>
                <div class="btm-red">
                  主电欠压({{ item.historyMainVoltageLossList.length }})
                </div>
                <div class="btm-red">
                  备电欠压({{ item.historySecondVoltageLossList.length }})
                </div>
              </div>
            </div>
          </el-popover>
        </div>

        <div
          v-if="state.rightDateIndex === 0"
          v-for="(item, index) in nextMonthSurplusDayArray"
          :key="index"
          class="grid-item2 next"
        >
          {{ item }}
        </div>
        <div
          v-if="state.rightDateIndex === 1"
          v-for="(item, index) in state.weekData"
          :key="index"
          class="grid-item3"
           :style="{'border': currentDate == item.weekDay ? '3px solid #ffaa4f' : ''}"
        >
        <!-- :style="{'background-color': currentDate == item.weekDay ? 'rgba(239, 246, 255, .5)' : ''}" -->
          <div>
            {{ item.weekDay }}
          </div>
          <div class="week-item" v-if="item.updateNum !== 0 || item.faultNum !== 0">
            <div class="week-item-title">分站</div>
              <div class="week-item-content">
                <div class="btm-blue">
                  新增({{ item.historySubstationInsertList.length }})
                </div>
                <div class="btm-blue">
                  编辑({{ item.historySubstationEditList.length }})
                </div>
                <div class="btm-blue">
                  删除({{ item.historySubstationDeletedList.length }})
                </div>
                <div class="btm-red">
                  故障({{ item.historySubstationErrorList.length }})
                </div>
                <div class="btm-red">
                  网络故障({{ item.historySubstationNetErrorList.length }})
                </div>
              </div>
          </div>
          <div class="week-item" v-if="item.updateNum !== 0 || item.faultNum !== 0">
            <div class="week-item-title">测点</div>
              <div class="week-item-content">
                <div class="btm-blue">
                  新增({{ item.historyPointInsertList.length }})
                </div>
                <div class="btm-blue">
                  编辑({{ item.historyPointEditList.length }})
                </div>
                <div class="btm-blue">
                  删除({{ item.historyPointDeletedList.length }})
                </div>
                <div class="btm-red">
                  报警({{ item.historyPointAlarmList.length }})
                </div>
                <div class="btm-red">
                  故障({{ item.historyPointFaultList.length }})
                </div>
                <div class="btm-red">
                  断电({{ item.historyPointPowerOffList.length }})
                </div>
              </div>
          </div>
          <div class="week-item" v-if="item.updateNum !== 0 || item.faultNum !== 0">
            <div class="week-item-title">电源</div>
              <div class="week-item-content">
                <div class="btm-red">
                  主电欠压({{ item.historyMainVoltageLossList.length }})
                </div>
                <div class="btm-red">
                  备电欠压({{ item.historySecondVoltageLossList.length }})
                </div>
              </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import axios from "@/utils/request";
const props = defineProps({
  month: {
    type: Number,
    default: 10,
  },
  years: {
    type: Number,
    default: 2024,
  },
  riliData: {
    type: Array,
    default: () => [],
  },
});
const state = reactive({
  leftDate: "08-16",
  nowDate: "2024年5月",
  monthActive: "",
  rightDate: ["月", "周"],
  rightDateIndex: 0,
  popData: [
    {
      name: "新增",
      num: 4,
    },
    {
      name: "编辑",
      num: 4,
    },
    {
      name: "删除",
      num: 1,
    },
    {
      name: "断线",
      num: 20,
    },
    {
      name: "报警",
      num: 20,
    },
  ],
  currentWeekNumber: [],
  weekData: [],
  currentMonthList: [], //当前月份列表
});
// const header = reactive<string[]>(['日', '一', '二', '三', '四', '五', '六'])
const header = reactive([
  "周一",
  "周二",
  "周三",
  "周四",
  "周五",
  "周六",
  "周日",
]);
// 上个月剩余天数
const lastMonthSurplusDay = ref(0);
const lastMonthSurplusDayArray = ref([]);
// 下个月剩余天数
const nextMonthSurplusDay = ref(0);
const nextMonthSurplusDayArray = ref([]);
// 当前月份总天数
const currentMonthDayCount = ref(0);
const currentYear = ref(0);
const currentMonth = ref(0);
const currentDate = ref(0);
watch(
  () => props.month,
  (newValue) => {
    if (newValue) {
      console.log(newValue, "newValue");
      currentMonth.value = newValue;
      calculateDays();
    }
  }
);
watch(
  () => props.years,
  (newValue) => {
    if (newValue) {
      currentYear.value = newValue;
      calculateDays();
    }
  }
);
// 闰年
const leapMonthDay = reactive([31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]);
// 平年
const normalMonthDay = reactive([
  31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31,
]);
// 是否为闰年
function isLeapYear(year) {
  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}
// 获取这个月1号的星期数
function getMonthFirstDay(year, month) {
  return new Date(year, month - 1, 1).getDay();
}
// 计算日期
function calculateDays() {
  // 获取本月第一天星期几(星期几就补多少个空)
  // lastMonthSurplusDay.value = getMonthFirstDay(currentYear.value, currentMonth.value)
  lastMonthSurplusDay.value =
    getMonthFirstDay(currentYear.value, currentMonth.value) === 0
      ? 6
      : getMonthFirstDay(currentYear.value, currentMonth.value) - 1;
  // 获取当前月有多少天
  currentMonthDayCount.value = isLeapYear(currentYear.value)
    ? leapMonthDay[currentMonth.value - 1]
    : normalMonthDay[currentMonth.value - 1];
  let prevMonthLastDate = 0;
  if (currentMonth.value === 1) {
    // 当前是1月还要用去年的去判断
    prevMonthLastDate = isLeapYear(currentYear.value - 1)
      ? leapMonthDay[leapMonthDay.length - 1]
      : normalMonthDay[normalMonthDay.length - 1];
  } else {
    prevMonthLastDate = isLeapYear(currentYear.value)
      ? leapMonthDay[currentMonth.value - 2]
      : normalMonthDay[currentMonth.value - 2];
  }
  // 获取还需要渲染多少天
  nextMonthSurplusDay.value =
    42 - (lastMonthSurplusDay.value + currentMonthDayCount.value);
  const prevtemp = [];
  const nexttemp = [];
  for (
    let i = prevMonthLastDate - lastMonthSurplusDay.value + 1;
    i <= prevMonthLastDate;
    i++
  ) {
    prevtemp.push(i);
  }
  for (let i = 1; i <= nextMonthSurplusDay.value; i++) {
    nexttemp.push(i);
  }
  lastMonthSurplusDayArray.value = prevtemp;
  nextMonthSurplusDayArray.value = nexttemp;
}
// 上个月
function preMonth() {
  console.log(currentMonth.value, "currentMonth.value");
  if (currentMonth.value === 1) {
    currentMonth.value = 12;
    --currentYear.value;
  } else {
    --currentMonth.value;
  }
  state.nowDate = `${currentYear.value}年${currentMonth.value}月`;
  calculateDays();
  getList();
}
// 下个月
function nextMonth() {
  if (currentMonth.value === 12) {
    currentMonth.value = 1;
    ++currentYear.value;
  } else {
    ++currentMonth.value;
  }
  state.nowDate = `${currentYear.value}年${currentMonth.value}月`;
  calculateDays();
  getList();
}
//日历切换
function qiehuanFn(index) {
  state.rightDateIndex = index;
  if (index === 1) {
    let arr = [];
    const now = new Date();
    const dayOfWeek = now.getDay(); // 0 表示周日，1 到 6 表示周一到周六
    const numDaysToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
    const numDaysToSunday = dayOfWeek === 0 ? 0 : 7 - dayOfWeek;

    const startDate = new Date(now);
    const endDate = new Date(now);

    startDate.setDate(startDate.getDate() - numDaysToMonday);
    endDate.setDate(endDate.getDate() + numDaysToSunday);

    const dates = [];
    for (let i = 0; i < 7; i++) {
      const date = new Date(startDate);
      date.setDate(date.getDate() + i);
      dates.push(new Date(date));
    }
    dates.forEach((date) => {
      arr.push(date.toLocaleDateString().split("/")[2]); // 输出形式为 YYYY-MM-DD
    });

    state.currentWeekNumber = arr;
    // console.log(dates, "currentWeekNumber");
    getList('周')
  }else{
    //月
    getList()
  }
}
// 获取当前日期
function getCurrentDate() {
  const d = new Date();
  const year = d.getFullYear();
  const month = d.getMonth() + 1;
  const date = d.getDate();
  return {
    year,
    month,
    date,
  };
}
// 初始化日历
function initCalendar() {
  const { year, month, date } = getCurrentDate();
  console.log(year, month, date, "year, month, date");
  state.leftDate = `${month < 10 ? "0" + month : month}-${
    date < 10 ? "0" + date : date
  }`;
  state.monthActive = month;
  currentYear.value = year;
  currentMonth.value = month;
  currentDate.value = date;
  state.nowDate = `${currentYear.value}年${currentMonth.value}月`;
  calculateDays();
}
function getList(val) {
  console.log(currentYear.value, "currentYear.value");
  console.log(currentMonth.value, "currentMonth.value");
  console.log(currentDate.value, "currentDate.value");
  axios
    .post("/gas/substation/getAllHistorySubstation", {
      year: currentYear.value,
      month: currentMonth.value,
      type: val === '周'? 0 : 1, //0周 1月
    })
    .then((res) => {
      if(state.rightDateIndex==0){
        state.currentMonthList = res.data;
      }else{
        res.data.forEach((item) => {
item.weekDay=item.time.split(' ')[0].split('-')[2]
        })
        state.weekData = res.data;
      }
    });
}
onMounted(() => {
  initCalendar();
  getList();
});
</script>
<style scoped lang="scss">
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 5px 10px;
  .top-left {
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    img {
      width: 30px;
      height: 30px;
    }
    .left-img {
      transform: rotate(-180deg);
    }
    .right-img {
      margin-left: 5px;
    }
    .txt {
      margin-left: 5px;
      font-size: 12px;
      color: #4f81ef;
      background-color: #eff6ff;
      padding: 3px 10px;
    }
  }
  .top-center {
    font-weight: bold;
    color: #333;
  }
  .top-right {
    .genxin {
      font-size: 14px;
      &::before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 3px;
        background-color: #4f81ef;
        margin-right: 5px;
      }
    }
    .yichang {
      font-size: 14px;
      margin-left: 10px;
      &::before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 3px;
        background-color: #ff0000;
        margin-right: 5px;
      }
    }
    .right-txt {
      margin-left: 10px;
      font-size: 12px;
      color: rgba(59, 130, 246, 1);
      width: 35px;
      padding: 2px 10px;
      cursor: pointer;
    }
    .right-txt-active {
      display: inline-block;
      background-color: #eff6ff;
      border-radius: 3px;
      text-align: center;
    }
  }
}
.bottom {
  margin-top: 10px;
}
</style>
<style scoped lang=scss>
.toolbar {
  display: flex;
  width: 100%;
  height: 30px;
}

.toolbar .date {
  flex: 1;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  border-top: 1px solid #eee;
  padding: 10px;
  box-sizing: border-box;
}
.toolbar .btn {
  flex: 1;
  color: #1d84f6;
  text-align: center;
  line-height: 30px;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  padding: 10px;
  box-sizing: border-box;
}
.container {
// overflow-x: auto;
  width: 100%;
  height: 100%;
  display: grid;
  box-sizing: border-box;
  grid-template-columns: auto auto auto auto auto auto auto;
  // border-top: 1px solid #eee;
  // border-right: 1px solid #eee;
  // border-bottom: 1px solid #eee;

  // border-left: 1px solid #eee;
}
.grid-item {
  /* width: 50px; */
  width: 230px;
  height: 50px;
  line-height: 50px;
  // border-bottom: 1px solid #eee;
  // border-left: 1px solid #eee;
  background-color: #eff6ff;
  margin: 0 5px;
  font-size: 14px;
  text-align: center;
  font-weight: 700;
}
// .grid-item:first-child{
//   border-left: 1px solid #eee;
// }
.grid-item2 {
  // width: 100%;
  width: 230px;
  height: 98px;
  padding: 10px 0 0 15px;
  border: 1px solid #eee;
  // border-top: 1px solid #eee;
  // border-left: 1px solid #eee;
  margin: 5px;
  /* border-right: 1px solid #eee; */
  .item-one {
    // white-space: nowrap;  // 不换行
    // overflow: hidden;  // 隐藏超出的文本
    // text-overflow: ellipsis;  // 使用省略号表示超出的文本
    // width: 200px;
    display: flex;
    justify-content: space-between;
    background-color: #d9ecff;
    border-radius: 3px;
    padding: 0 2px;
    font-size: 12px;
    border-left: 2px solid #409eff;
    margin-bottom: 2px;
  }
  .item-two {
    white-space: nowrap;
    // width: 213px;
    display: flex;
    justify-content: space-between;
    background-color: #e6fff0;
    border-radius: 3px;
    padding: 0 2px;
    font-size: 12px;
    border-left: 2px solid #36c470;
    margin-bottom: 2px;
  }
  .item-three {
    white-space: nowrap;
    // width: 213px;
    display: flex;
    justify-content: space-between;
    background-color: #f4ebff;
    border-radius: 3px;
    padding: 0 2px;
    font-size: 12px;
    border-left: 2px solid #b083e2;
    margin-bottom: 2px;
  }
}
.prev,
.next {
  color: #cbcbcb;
  background-color: #f8fafc;
  border: none;
}
.grid-item2:first-child {
  background-color: red !important;
  border-top: none;
  border-left: 0;
}
.pop-genxin {
  margin-top: 10px;
  font-size: 14px;
  .icon-genxin {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: #4f81ef;
    margin-right: 10px;
  }
  .num {
    margin-left: 10px;
  }
}
.pop-yichang {
  margin-top: 10px;
  font-size: 14px;
  .icon-yichang {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: #ff0000;
    margin-right: 10px;
  }
  .num {
    margin-left: 10px;
  }
}
.container-hover {
  &:hover {
    background-color: #ddebfa;
  }
}
.pop-content {
  width: 350px;
  display: flex;
  justify-content: space-between;
  .content-item {
    width: 110px;
    height: 185px;
    background-color: #f7f7f7;
    text-align: center;
    padding: 5px;
    .title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .btm-blue {
      font-size: 12px;
      width: 100px;
      height: 20px;
      padding: 0 10px;
      margin-bottom: 5px;
      border: 1px solid #1a82f2;
      color: rgba(26, 130, 242, 1);
      border-radius: 10px;
      padding: 2px 10px;
    }
    .btm-red {
      font-size: 12px;
      width: 100px;
      height: 20px;
      padding: 0 10px;
      margin-bottom: 5px;
      border: 1px solid #ff0000;
      color: rgba(255, 0, 0, 1);
      border-radius: 10px;
      padding: 2px 10px;
    }
  }
}
.grid-item3 {
  // width: 100%;
  width: 230px;
  height: 632px;
  padding: 15px 15px 0 15px;
  border: 1px solid #eee;
  text-align: center;
  // border-top: 1px solid #eee;
  // border-left: 1px solid #eee;
  margin: 5px;
  /* border-right: 1px solid #eee; */
  .week-item {
    margin-top: 10px;
    .week-item-title {
      font-size: 16px;
      font-weight: 700;
    }
    .week-item-content {
      // width: 80px;
      // height: 160px;
      // background-color: #f7f7f7;
      // text-align: center;
      // padding: 5px;
      // .title {
      //   font-size: 14px;
      //   font-weight: bold;
      //   margin-bottom: 5px;
      // }
      .btm-blue {
        margin: 8px;
        display: inline-block;
        font-size: 12px;
        width: 100px;
        height: 20px;
        padding: 0 10px;
        margin-bottom: 5px;
        border: 1px solid #1a82f2;
        color: rgba(26, 130, 242, 1);
        border-radius: 10px;
        padding: 2px 10px;
      }
      .btm-red {
        margin: 8px;
        display: inline-block;
        font-size: 12px;
        width: 100px;
        height: 20px;
        padding: 0 10px;
        margin-bottom: 5px;
        border: 1px solid #ff0000;
        color: rgba(255, 0, 0, 1);
        border-radius: 10px;
        padding: 2px 10px;
      }
    }
  }
}
/* .grid-item:nth-child(7n) {
  border-right: none;
}

.very-hot {
  background-color: #e10231;
}
.middle-hot {
  background-color: #fe4806;
}
.normal-hot {
  background-color: #ffb508;
} */
</style>
